<template>
  <div class="CommonInput">
    <div class="label" :class="{ required }">{{ label }}</div>
    <input
      class="input"
      :style="{ width: width || '330rpx' }"
      type="text"
      v-model="currentValue"
      :placeholder="placeholder"
      @focus="$emit('focus')"
      :disabled="disabled">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    required: {
      type: Boolean,
    },
    disabled: {
      type: Boolean,
    },
    width: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      currentValue: null,
    }
  },
  watch: {
    value: {
      immediate: true,
      handler () {
        this.currentValue = this.value
      },
    },
    currentValue: {
      handler () {
        this.$emit('input', this.currentValue)
      },
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.CommonInput {
	.label {
		@include label;
	}

	.input {
		box-sizing: border-box;
		height: 32px;
		padding: 0 16px;
		border: 1px solid #e6e6e6;
		border-radius: 3px;
		line-height: 32px;
	}
}
</style>
